<html>
<head>
	<title>Payment Information - H!Indonesia</title>
	<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tabify.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tipsy.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<link rel="stylesheet" type="text/css" href="css/960.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/tipsy.css" />
	<script type="text/javascript">
		$(function(){
			$('#tab-payment').tabify();

			$("ul.tabs-menu li").click(function () {
				$('.tabs-content').fadeIn(500);
			});
		});
	</script>
</head>
<body>
	<div class="container_24">
		<header>
			<div class="header-wrapper clearfix">
				<div id="top-bar" class="grid_24">
					<div class="login-box">
						<span class="sign-up-left">
							<a href="#">Sign Up</a>
						</span>
						<span class="separate-or">
						or
						</span>
						<span class="sign-in-right">
							<a href="#">Log In</a>
						</span>
					</div>
					<div class="search-box">
						<button class="search-trigger"></button>
						<input type="text" id="search_keyword" placeholder="search">
					</div>
				</div>
				<div id="site-logo" class="grid_7">
					<a href="#">
						<img src="img/assets/logo.png" alt="H!Indonesia | Online Tourism Information and Booking Ticket"> 
					</a>
				</div>
				<nav id="top-nav" class="grid_17">
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li class="drop"><a href="#">book</a>
							<ul>
								<li><a href="#">flight</a></li>
								<li><a href="#">hotel</a></li>
							</ul>
						</li>
						<li><a href="#">plan</a></li>
						<li><a href="#">explore</a></li>
						<li><a href="#">news</a></li>
						<li><a href="#">travel notes</a></li>
						<li><a href="#">travel guide</a></li>
						<li><a href="#">faq</a></li>
						<li><a href="#">about us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section class="main-content grid_16">
			<div class="payment">
				<div class="payment-steps">
				    <ul>
		    	        <li><a href="#" class="step-hover step-1">Your Details</a></li>
						<li><a class="checkout-link current step-2">Payment Info</a></li>
	    	            <li><a class="checkout-link step-3">Finish!</a></li>
				    </ul>
				</div>
				<div class="payment-info">
			        <h2>Payment Information</h2>
			        <div class="payment-wrapper">
			        	<div class="payment-header">
				        	<h3>Choose Payment Method</h3>
							<ul id="tab-payment" class="tabs-menu clearfix">
				                <li class="active">
				                	<a href="#credit-card">Credit Card</a>
				                </li>
				                <li>
				                	<a href="#bank-transfer">Bank Transfer</a>
				                </li>
				            </ul>
			        	</div>
			            <div id="credit-card" class="tabs-content clearfix">
			            	<form method="post">
				            	<div class="contact-person">
					            	<h3>Contact Information </h3>
					            	<div class="cols clearfix">
					            	    <p class="left grid_7">
					            	        <label for="email-ci">Email<span class="note-required">*</span></label><br>
					            	        <input type="text" id="email-ci" name="email-ci" value=""><br>
					            	        <span class="help-block">Please ensure your email address is correct as your voucher will be sent to this address. We never share your information with anyone.</span>
					            	    </p>
					            	     <p class="right grid_7">
					            	        <label for="re-email-ci">Re-enter email address</label><br>
					            	        <input type="text" id="re-email-ci" name="re-email-ci" value="">
					            	    </p>
					            	</div>
				            	</div>
				            	<div class="payment-details">
				            		<h3>Payment Details</h3>
				            		<div class="detail-credit-card">
				            			Pasang iframe didieu bray!
				            		</div>
				            	</div>
				            	<div class="payment-instruction">
				            		<h4>Please follow these steps to complete your payment</h4>
				            		<ul>
				                        <li>
			                                You will be directed to CIMB Clicks after clicking the Continue Booking link  
				                        </li> 
				                        <li>
				                            The payment must be made within <strong>60 minutes</strong> after the booking.
				                        </li>
				                        <li>
				                            The transaction will be cancelled (expired) if you do not make a payment within the determined period.
				                        </li>
				                        <li>
				                            For confirmation and printing the payment receipt in the later time, you can find it in My Account after you login to Tiket.com
				                        </li>
				                        <li>
				                            After you have completed the payment, <strong>you will receive an e-mail within 5 minutes</strong> containing your <strong>Hotel / Event / Flight Voucher for Hotel / Event / Flight purchase or Booking Code &amp; Pass Key for movie purchase</strong>
				                        </li>
			                        </ul>
				            	</div>
				            	<hr/>
				            	<div class="cont-booking">
				            		<p class="grid_8">If you agree with the policy below, please click the "Continue Booking" button on this side to confirm the booking.</p>
				            		<input type="submit" value="Continue Booking" id="booking-button" class="button"/>
				            	</div>
			            	</form>
			            </div>
			             <div id="bank-transfer" class="tabs-content clearfix">
			             	<form method="post">
				            	<div class="contact-person">
					            	<h3>Contact Information </h3>
					            	<div class="cols clearfix">
					            	    <p class="left grid_7">
					            	        <label for="email-ci">Email<span class="note-required">*</span></label><br>
					            	        <input type="text" id="email-ci" name="email-ci"><br>
					            	        <span class="help-block">Please ensure your email address is correct as your voucher will be sent to this address. We never share your information with anyone.</span>
					            	    </p>
					            	     <p class="right grid_7">
					            	        <label for="re-email-ci">Re-enter email address</label><br>
					            	        <input type="text" id="re-email-ci" name="re-email-ci">
					            	    </p>
					            	</div>
				            	</div>
				            	<div class="payment-details">
				            		<h3>Payment Details</h3>
				            		<ul class="unique-total">
				            			<li><label>Unique Transfer Code</label> <strong class="currency" rel="516500">IDR 516,500.00</strong></li>
				            			<li><h4><label>Final Total</label> <strong class="currency" rel="516500">IDR 516,500.00</strong></h4></li>
				            		</ul>
				            	</div>
				            	<div class="payment-terms">
				            		<h4>To complete the booking, you have to agree on some important points below</h4>
				            		<ul>
				                        <li class="clearfix">
				                        	<div class="left">
					                        	<input type="checkbox" name="term-1" id="term-1">
					                        </div>
					                        <div class="right">
				                                <label for="term-1">I have agreed to pay <strong>IDR 296.933,00</strong> and been aware that my order will be canceled if the amount is not same.</label>
				                            </div>
				                        </li> 
				                        <li class="clearfix">
				                        	<div class="left">
				                        		<input type="checkbox" name="term-2" id="term-2">
				                        	</div>
				                        	<div class="right">
				                        		<label for="term-2">I have agreed to pay before <strong>05 June 2013 14:19</strong> (58 minutes from now). otherwise my order will be canceled.</label>
				                        	</div>
				                        </li>
			                        </ul>
				            	</div>
				            	<div class="cont-booking clearfix">
				            		<input type="submit" value="Continue Booking" id="booking-button" class="button"/>
				            	</div>
				            	<div class="review-policy">
				            		<h3>Review Policies</h3>
					            	<ul>
	                                	<li>For the convenience of your transaction, please save your receipt.</li>
	                        			<li>Make sure you transfer the amount of funds in accordance with the Total Final shown above. <strong>Example : IDR 292,173</strong></li>
	                        			<li>Please enter the following information: Account number, Order ID, and the full name of people who will use the hotel voucher or ticket to the event in message columns or records at the time of transfer.</li>
	                        			<li>The amount of funds you transfered is non-refundable. According to Seller (Hotel, Promotor, or Blitz Megaplex) Cancellation Policy.</li>
									</ul>
								</div>
			            	</form>
			             </div>
			        </div>
		    	</div>
	    	</div>
		</section>
		<section class="sidebar-right grid_8">
			<div class="order-summary">
				<hgroup>
					<h2>Order Summary</h2>
					<h4>Order ID : <span>2905245</span></h4>
				</hgroup>
				<hr/>
				<ul>
					<li><strong>Lion (JT-34 - Depart)</strong></li>
					<li>CGK (Jakarta) - DPS (Denpasar, Bali)</li>
					<li><label class="depart-arrive">Depart</label> 04:30 (CGK) | 01/05/2013</li>
					<li><label class="depart-arrive">Arrive</label> 07:20 (DPS) | 01/05/2013</li>
				</ul>
				<hr/>
				<ul class="price-discount">
					<li><label>Price</label><span class="currency" rel="516500">516,500.00 IDR</span></li>
					<li><label>Tax and service</label><span class="currency" rel="516500">516,500.00 IDR</span></li>
					<li><label>Discount</label><strong class="currency" rel="516500">(516,500.00 IDR)</strong></li>
				</ul>
				<hr/>
				<div class="promo-wrap">
					<form method="post">
						<div class="gift-card clearfix">
							<label for="gift-card-code">Redeem Gift Card</label>
							<input type="text" id="gift-card-code" name="gift-card-code"/>
						</div>
						<div class="separator-or"><span>Or</span></div>
						<div class="promo-code clearfix">
							<label for="promo-code" tooltip="Enter Promo Code to get Discounted Price for this order">Promo Code</label>
							<input type="text" id="promo-code" name="promo-code"/>
						</div>
						<div class="confirm-use">
							<input type="submit" value="Use"/>
						</div>
					</form>
				</div>
				<hr>
				<div class="unique">
					<label>Unique Code</label><span class="currency" rel="516500">516,500.00 IDR</span>
				</div>
				<div class="total-order">
					<p>Total<span class="currency" rel="520000">520,000.00 IDR</span></p>
				</div>
			</div>
		</section>
		<footer>
			<nav class="clearfix">
				<ul class="bottom-nav grid_24">
		          <li><a href="#">About Us</a></li>
		          <li><a href="#">FAQ</a></li>
		          <li><a href="#">Contact Us</a></li>
		          <li><a href="#">Jobs</a></li>
		          <li><a href="#">Our Partner</a></li>
		          <li><a href="#">Press</a></li>
		        </ul>
	        </nav>
	        <section class="footer">
	        	<div class="footer-wrapper clearfix">
		        	<div class="footer-left grid_12">
		        		<ul>
		        			<li><a href="#">Terms of service</a></li>
		        			<li><a href="#">Privacy</a></li>
		        			<li><a href="#">Feedback & support</a></li>
		        		</ul>
		        		<div class="copyright">
		        			&copy; 2013 Hi-Indonesia. All rights reserved.
		        		</div>
		        	</div>
		        	<div class="footer-right grid_12">
		        		<ul>
		        			<li><a href="#">English</a></li>
		        			<li><a href="#">Bahasa</a></li>
		        		</ul>
		        	</div>
	        	</div>
	        </section>
		</footer>
	</div>
</body>
</html>